/* eslint-disable react/button-has-type */

import cn from "classnames";

import { Icon } from "@/ui/Icons/Icon";
import React from "react";
import { ButtonPropsI, defaultProps } from "./ButtonProps";
import cls from "./Button.module.scss";

interface PropsI
  extends ButtonPropsI,
    React.DetailedHTMLProps<
      React.ButtonHTMLAttributes<HTMLButtonElement>,
      HTMLButtonElement
    > {
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
  disabled?: boolean;
}

export const Button: React.FC<PropsI> = ({
  children,
  variant,
  small,
  fullWidth,
  onClick,
  disabled,
  externalLink,
  ...rest
}) => {
  const isPlus = variant === "plus";

  return (
    <button
      className={cn(cls.button, {
        [cls.button_small]: small,
        [cls.button_fullwidth]: fullWidth,
        [cls.button_primary]: variant === "primary",
        [cls.button_red]: variant === "red",
        [cls.button_stroke]: variant === "stroke",
        [cls.button_redstroke]: variant === "redstroke",
        [cls.button_util]: variant === "util",
        [cls.button_plus]: isPlus,
      })}
      disabled={disabled}
      onClick={onClick}
      {...rest}
    >
      {isPlus && !children ? <Icon name="plus" /> : children}
    </button>
  );
};

Button.displayName = "Button";
Button.defaultProps = {
  ...defaultProps,
  onClick: () => null,
  disabled: false,
};
